<template>
  <div class="app-container">
    <div class="queryContent">
      <el-form :inline="true" ref="userForm" :model="userForm" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="userForm.loginId" placeholder="账号" clearable/>
        </el-form-item>

        <el-form-item label="用户名">
          <el-input v-model="userForm.userName" placeholder="用户名" clearable/>
        </el-form-item>

      </el-form>
    </div>

    <div class="buttonContent">
      <el-form :inline="true" label-width="80px">
        <el-row>
          <!--          <el-col :span="21">-->
          <!--            <el-button type="primary" @click="addUser" icon="el-icon-plus">新增</el-button>-->
          <!--          </el-col>-->
          <el-col style="text-align: right;">
            <el-button type="primary" @click="onQuery" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="onReset" icon="el-icon-refresh-right">重置</el-button>
          </el-col>

        </el-row>
      </el-form>

    </div>

    <div class="tableContent">
      <el-table :data="userList" border style="width: 100%;" :header-cell-style="this.$customUi.grid.title"
                :cell-style="this.$customUi.grid.cell" :style="this.$customUi.grid.style">

        <el-table-column show-overflow-tooltip prop="loginId" label="账号" min-width="100px"></el-table-column>

        <el-table-column show-overflow-tooltip prop="userName" label="用户名" min-width="100px"></el-table-column>

        <el-table-column show-overflow-tooltip prop="userPicture" label="头像" min-width="100px" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.userPicture" height="70">
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="sex" label="性别" align="center" min-width="100px">
          <template slot-scope="scope">
            {{scope.row.sex | sexType}}
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="birthday" label="生日" align="center"
                         min-width="100px"></el-table-column>

        <el-table-column show-overflow-tooltip prop="mobilePhone" label="手机号" align="center"
                         min-width="100px"></el-table-column>

        <el-table-column show-overflow-tooltip prop="mailbox" label="邮箱" align="center"
                         min-width="100px"></el-table-column>

        <el-table-column show-overflow-tooltip prop="userStatus" label="用户状态" align="center" min-width="100px">
          <template slot-scope="scope">
            <el-tag :type="scope.row.userStatus | statusFilter"> {{scope.row.userStatus | userStatus}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" align="center"
                         min-width="100px"></el-table-column>

        <el-table-column label="操作" sortable align="center" min-width="200px">
          <template slot-scope="scope">
            <el-button type="danger" @click="delUser(scope.row)" plain>删除</el-button>
            <el-button type="success" @click="edit(scope.row)" plain>编辑</el-button>
            <el-button type="success" @click="setRole(scope.row)" plain>设置角色</el-button>
            <el-button v-show="scope.row.userStatus == '0'" type="warning" @click="frozen(scope.row)" plain>冻结
            </el-button>
            <el-button v-show="scope.row.userStatus == '1'" type="warning" @click="thaw(scope.row)" plain>解冻</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pageContent">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :current-page=userForm.current
        :page-size=userForm.size
        :total=total
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>


    <!--  编辑界面  -->
    <user_edit ref="userEdit" @closeHide="close_dialog"></user_edit>
    <!--  设置角色  -->
    <user_role ref="userRole" @closeHide="close_dialog"></user_role>
  </div>
</template>

<script>
  import api from '@/api/sysUser'
  import user_edit from './user-edit'
  import user_role from './user-role'

  export default {
    name: 'index',
    components: { user_edit,user_role },
    data() {
      return {
        userForm: {
          // 当前页
          current: 1,
          // 每页显示条数
          size: 10,
          userName: '',
          loginId: ''
        },
        total: 0,
        userList: []
      }
    },
    filters: {
      sexType(type) {
        const isSexTypeMap = { 1: '男', 2: '女' }
        return isSexTypeMap[type]
      },
      statusFilter(status) {
        const statusMap = { 0: 'success', 1: 'danger' }
        return statusMap[status]
      },
      userStatus(status) {
        const userStatus = { 0: '正常', 1: '冻结' }
        return userStatus[status]
      }
    },
    created() {
      this.onQuery()
    },
    methods: {
      // 查询
      onQuery() {
        var me = this
        api.queryUser(this.userForm).then(response => {
          if (response.status === 200) {
            me.userList = response.data.records
            me.total = response.data.total
          }
        })
      },
      // 重置
      onReset() {
        this.userForm.current = 1
        this.userForm.size = 10
        this.userForm.userName = ''
        this.userForm.loginId = ''
        this.onQuery()
      },
      // 新增
      addUser() {
      },

      // 删除用户
      delUser(row) {
        var me = this
        me.$confirm('此操作将删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.delUser({ loginId: row.loginId }).then(response => {
            if (response.status === 200) {
              me.$message({ type: 'success', message: response.msg })
            } else {
              me.$message({ type: 'error', message: response.msg })
            }
            me.onQuery()
          })
        }).catch(() => {
          me.$message({ type: 'info', message: '已取消删除' })
        })
      },

      // 冻结账号
      frozen(row) {
        var me = this
        me.$confirm('此操作将冻结该账号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.frozenAccount({ loginId: row.loginId }).then(response => {
            if (response.status === 200) {
              me.$message({ type: 'success', message: response.msg })
            } else {
              me.$message({ type: 'error', message: response.msg })
            }
            me.onQuery()
          })
        }).catch(() => {
          me.$message({ type: 'info', message: '已取消冻结' })
        })
      },

      // 解冻
      thaw(row) {
        var me = this
        me.$confirm('此操作将解冻该账号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.thawAccount({ loginId: row.loginId }).then(response => {
            if (response.status === 200) {
              me.$message({ type: 'success', message: response.msg })
            } else {
              me.$message({ type: 'error', message: response.msg })
            }
            me.onQuery()
          })
        }).catch(() => {
          me.$message({ type: 'info', message: '已取消解冻' })
        })
      },

      // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.userForm.size = val
        this.onQuery()
      },
      // 分页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.userForm.current = val
        this.onQuery()
      },

      // 查看
      edit(row) {
        this.$refs.userEdit.open(row, 'view')
      },
      // 设置角色
      setRole(row) {
        this.$refs.userRole.open(row,'set')
      },
      // 关闭编辑dialog
      close_dialog() {
        this.onQuery()
      }
    }
  }
</script>

<style scoped>

</style>
